<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>新增/编辑文章</title>
    <link th:href="@{/lib/layui/css/layui.css}" rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link th:href="@{/css/style.css}" rel="stylesheet" href="/css/style.css" media="all">
</head>
<body class="">
<div class="layui-container">

    <div th:replace="common/fragment :: search"></div>


    <div class="layui-row">
        添加
    </div>

    <div class="layui-row">
        <form class="layui-form layui-form-pane" action="">
            <input type="hidden" name="id" th:value="${archives.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input name="title" th:value="${archives.title}" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">封面</label>
                <div class="layui-input-block">
                    <input type="hidden" id="banner" name="banner" th:value="${archives.banner}">
                    <img id="bannerImg" width="100" height="100" th:src="@{${archives.banner}}" alt="">
                    <button type="button" class="layui-btn" id="file">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content" cols="30" rows="10" th:text="${archives.content}"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>

<div th:replace="common/template :: footer"></div>
<div th:replace="common/template :: script"></div>
<script src="/lib/tinymce/tinymce.min.js"></script>
<script>
    layui.use(['element','table','jquery','layer','form','upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#file' //绑定元素
            ,url: '/fs/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                $("#banner").val(res.location);
                $("#bannerImg").attr("src",res.location);
            }
            ,error: function(){
                //请求异常回调
            }
        });

        tinymce.init({
            selector: '#content'
            , height: '400px'
            ,  language: 'zh_CN'
            , images_upload_url: '/fs/upload'
            , plugins: 'image codesample paste'
            ,toolbar: 'undo redo | image codesample'
            , paste_data_images: true

        });


        form.on('submit(formDemo)', function(data){
            var ed = tinyMCE.get('content');
            var content = ed.getContent();
            data.field.content = content;
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.post("/archives/save",data.field,function (resp) {
                if (resp.code == 1) {
                    layer.msg("成功");
                    setTimeout(function () {
                        location.href = "/archives/index";
                    }, 1000);
                }else{
                    layer.msg(resp.msg);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>